<template>
  <div class="home">
    <van-nav-bar title="智能化维修平台" :left-arrow="control"  @click-left="onClickLeft"></van-nav-bar>
    <div class="container">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>  
    </div>
    <van-tabbar v-model="active">
      <router-link to="/implement">
        <van-tabbar-item name="implement" icon="todo-list-o">执行</van-tabbar-item>
      </router-link>
      <router-link to="/maintainence">
        <van-tabbar-item name="maintainence" icon="bag-o">维修</van-tabbar-item>
      </router-link>
      <router-link to="/equipment">
        <van-tabbar-item name="equipment" icon="setting-o">设备</van-tabbar-item>
      </router-link>
      <router-link to="/report">
        <van-tabbar-item name="report" icon="records">报告</van-tabbar-item>
      </router-link>
       <router-link to="/users">
        <van-tabbar-item name="users" icon="friends-o">用户</van-tabbar-item>
      </router-link>
    </van-tabbar>
  </div>
</template>
<style lang="less" scoped>
.container {
  padding-top: 46px;
  padding-bottom: 50px;
}

.van-tabbar {
  display: flex;
  align-items: center;
}

a {
  flex: 1;
}
</style>
<script>
// @ is an alias to /src

export default {
  name: "home",
  data() {
    return {
      control:false,
      active: 'implement',
    };
  },
  methods:{
    initTab(){
      const path = this.$route.path;
      this.active = path.slice(1);
    },//刷新页面时初始化tab
    onClickLeft(){
      this.$router.go(-1);
    }
  },
  
  created(){
    this.initTab();
  },
  watch:{
    $route(to){
       this.control = false;
      if(to.name){
         this.control = true;
      }
    }//判断返回按钮的显示和隐藏
  }
 
};
</script>